<!DOCTYPE html>
<html>
	<head>
		<meta charset="UTF-8">
		<title></title>
		<style type="text/css">
		<link rel="stylesheet" href="styles.css">
		body {
		    margin: 0;
		    padding: 0;
		    font-family: Arial, sans-serif;
		    background: #f4f4f4;
		}
		
		/* 外层大盒子 */
		.outer-box {
		    width: 320px; /* 设置宽度为手机屏幕大小 */
		    height: 530px; /* 高度为手机屏幕大小 */
		    margin: 0 auto;
		    background: url(../img/bg.png) no-repeat center center; /* 背景图 */
		    background-size: cover; /* 自适应背景图大小 */
		    border: 1px solid #ccc;
		    overflow: hidden; /* 防止内容溢出 */
		    position: relative;
		}
		
		/* 内容区域 */
		.content-box {
		    width: 250px; /* 设置内容区域宽度 */
		    height: 400px; /* 内容区域高度 */
		    margin: 60px auto; /* 居中对齐 */
		    overflow: auto;
		    border: 1px solid #ddd;
		}
		
		</style>
	</head>
	<body>
		<div class="outer-box">
        	<div class="content-box">
            	<img src="../img/content.jpg" alt="背景图">
        	</div>
    	</div>
	</body>
</html>
